<style lang="scss" scoped>
@import '../../style/mixin-rem.scss';
.book-details-content-info{
  display: flex;
  justify-content: space-between;
  .title-wrapper {
    .title {
      font-size: rem(36px);
      font-weight: 800;
      color: #42464e;
      margin-bottom: rem(30px);
    }
    .author {
      font-size: rem(24px);
      color: #ff3c31;
      margin-bottom: rem(20px);
    }
    .date {
      font-size: rem(24px);
      color: #bbb;
      margin-bottom: rem(20px);
    }
    .chapter {
      font-size: rem(24px);
      color: #bbb;
    }
  }
  .cover {
    width: rem(186px);
    height: rem(248px);
  }
}
</style>

<template>
  <div class="book-details-content-info">
    <div class="title-wrapper">
      <div class="title" v-text="info.title"></div>
      <div class="author"><span v-text="info.author"></span>[著]</div>
      <div class="date" v-text="info.date"></div>
      <div class="chapter" v-text="info.chapter"></div>
    </div>
    <img class="cover" :src="info.cover" alt="">
  </div>
</template>

<script>
export default {
  name: 'bookDetailsContentInfo',
  computed: {
    info () {
      return this.$store.state.bookDetails.info
    }
  }
}
</script>
